<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style5.css"/>
    <script src="js/modernizr.custom.63321.js"></script>

    <style type="text/css">

        body {
            background-image: url("images/grid_DominikKiss_SubtlePatterns.jpg");
        }

        * {
            font-family: 'Roboto', sans-serif;
        }


        button:focus {
            outline: none;
        }

        button:hover {
            background: #9b59b6;
        }

        h2 {
            font-size: 22px;
            line-height: 1.6;
            text-align: center;
            font-weight: 300;
            color: #777;
            font-family: 'Roboto', sans-serif;
            margin: 100px 0 0;
        }

        /*按钮居中变小
        */
        #button-wrapper {
            width: 450px;
            text-align: center;
            padding: 0 100px;
            box-sizing: border-box;
            -webkit-transition: .3s all ease .3s;
            transition: .3s all ease .3s;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
        }

        button {
            width: 100%;
            background: #8e44ad;
            border: none;
            border-radius: 50px;
            padding: 5px 0;
            cursor: pointer;
            -webkit-transition: .3s all ease;
            transition: .3s all ease;
            position: relative;
        }

        button p {
            color: white;
            font-size: 18px;
            font-weight: 400;
            line-height: 40px;
            max-height: 40px;
            -webkit-transition: .3s all ease;
            transition: .3s all ease;
        }

        button .fill {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 0%;
            background: #8e44ad;
            border-radius: 50px;
        }

        button .fa {
            font-size: 25px;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            line-height: 50px;
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
        }

        #button-wrapper.clicked {
            padding: 0;
        }

        #button-wrapper.clicked button {
            background: #ccc;
            margin-top: 25px;
        }

        #button-wrapper.clicked button p {
            max-height: 0;
            overflow: hidden
        }

        #button-wrapper.clicked button .fill {
            width: 100%;
            -webkit-transition: .3s all ease .3s;
            transition: 2s all ease .6s;
        }

        #button-wrapper.success button {
            margin: 0;
            padding: 25px;
            width: 50px;
        }

        #button-wrapper.success button .fa {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s all ease .3s;
            transition: .3s all ease .3s;
        }
    </style>


</head>
<body>
<form action="surveyServlet4" method="post">
    <div class="container">
        <header class="clearfix">
            <h1>房屋推荐问卷<span>选择时请点击下拉选择菜单</span></h1>
            <nav class="codrops-demos">
                <a href="survey1.html">您的月收入</a>
                <a href="survey2.html">购房面积</a>
                <a href="survey3.html">购房地区位置</a>
                <a class="current-demo" href="index4.html">购房小区需求</a>
                <a href="survey5.html">购房楼层需求</a>
                <a href="survey6.html">楼层建造时间</a>
            </nav>
        </header>
        <section class="main clearfix">
            <div class="fleft">
                <p>请选择您的理想小区类型：</p>

            </div>


            <form action="surveyServlet4" method="post">
                <div class="fleft">
                    <select id="cd-dropdown" name="cd-dropdown" class="cd-select">
                        <option value="-1" selected>请选择您的选项</option>
                        <option value="1" class="icon-tux">配套成熟繁华地段近地铁</option>
                        <option value="2" class="icon-finder">品质小区繁华地段环境优美</option>
                        <option value="3" class="icon-windows">品质小区安全性高素质住户</option>
                        <option value="4" class="icon-android">厅带阳台景观房拎包入住</option>
                        <option value="5" class="icon-cloudy">交通便利近地铁卫浴全明</option>
                        <option value="3" class="icon-twitter">近地铁交通便利主卧朝南</option>
                    </select>
                </div>



        </section>
    </div>



    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.dropdown.js"></script>
    <script type="text/javascript">

        $(function () {

            $('#cd-dropdown').dropdown({
                gutter: 5,
                stack: false,
                delay: 100,
                slidingIn: 100
            });

        });

    </script>


    <div class="htmleaf-container">
        <div class="htmleaf-content">
            <div id="button-wrapper">
                <button type="submit">
                    <p>下一步</p>
                    <div class="fill"></div>
                    <div class="fa fa-check"></div>
                </button>
            </div>
        </div>
        <script src='/按钮/js1/jquery-1.11.0.min.js'></script>
        <script>
            (function () {
                'use strict';
                var $button = $('button');
                $button.on('click', function () {
                    $(this).parent().addClass('clicked').delay(2600).queue(function () {
                        $(this).addClass('success');
                    });
                });
            }());
        </script>
    </div>

</form>
</body>
</html>
